import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FirstPersonControls } from "three/examples/jsm/controls/FirstPersonControls";
import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Mesh,
  BoxBufferGeometry,
  MeshBasicMaterial,
  TextureLoader,
  CubeTextureLoader,
  AxesHelper,
  AmbientLight,
  PointLight,
  CubeRefractionMapping,
  Geometry,
  SphereBufferGeometry,
} from "three";
import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader";
import { MeshPhongMaterial } from "three";
import { SingleEntryPlugin } from "webpack";

let camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer;
let orbitControl: OrbitControls;
let firstPersonControl: FirstPersonControls;
let mesh: Mesh;
let meshs: Array<Mesh> = [];

init();
animate();

function init() {
  camera = new PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  camera.position.set(0, 0, 3200);

  scene = new Scene();

  // add light
  let ambientLight = new AmbientLight("#fff");
  let pointLight = new PointLight("#fff");
  pointLight.position.set(0, 5000, 0)
  scene.add(ambientLight);
  scene.add(pointLight);

  //   set axes
  //   let axes = new AxesHelper(10000);
  //   scene.add(axes);

  // set background
  let cubeTextureLoader = new CubeTextureLoader();
  // 立方体盒子贴图顺序
  // [right,left,up,down,front,back]
  let imgs = [
    require("../static/textures/Park3Med/px.jpg").default,
    require("../static/textures/Park3Med/nx.jpg").default,
    require("../static/textures/Park3Med/py.jpg").default,
    require("../static/textures/Park3Med/ny.jpg").default,
    require("../static/textures/Park3Med/pz.jpg").default,
    require("../static/textures/Park3Med/nz.jpg").default,
  ];
  let textureCube = cubeTextureLoader.load(imgs);
  textureCube.mapping = CubeRefractionMapping;
  scene.background = textureCube;

  // load model
  let geometry = new SphereBufferGeometry(100, 32, 16);
  let material = new MeshBasicMaterial({
    color: "#fff",
    refractionRatio: .5,
    reflectivity: .98,
    envMap: scene.background
  });
  // material.envMap.mapping = CubeRefractionMapping;

  for (let i = 0; i < 500; i++) {
    let mesh = new Mesh(geometry, material);
    mesh.position.x = Math.random() * 10000 - 5000;
    mesh.position.y = Math.random() * 10000 - 5000;
    mesh.position.z = Math.random() * 10000 - 5000;
    mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;

    meshs.push(mesh)
    scene.add(mesh);
  }

  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  orbitControl = new OrbitControls(camera, renderer.domElement);
  // orbitControl.maxDistance = 2000000;
  // orbitControl.minDistance = 10;
  //   firstPersonControl = new FirstPersonControls(camera, renderer.domElement);
  document.body.appendChild(renderer.domElement);
  // renderer.render(scene, camera);
}

function animate() {
  const timer = 0.0001 * Date.now();
  for(let i = 0, sum = meshs.length; i < sum; i ++){
    meshs[i].position.x = 5000 * Math.cos(timer + i);
    meshs[i].position.y = 5000 * Math.sin(timer + i);
  }
  camera.lookAt( scene.position );
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
